<template>
  <div class="container">
    <div class="banner">
      <img src="../../../static/images/newsBanner.jpg" class="img-res">
    </div>
    <div class="newsContent">
      <div class="goBack">
        <el-button @click="goBack">Go Back >></el-button>
      </div>
      <h1>{{ newsContent.title }}</h1>
      <div class="content" v-html="palceImg(newsContent.exi_content)"></div>
      <h3>RELATED PRODUCTS</h3>
      <el-row :gutter="20" class="repro">
        <el-col :span="12" v-for="item in reProList" :key="item.id">
          <router-link :to="'/product/' + (item.id)">
            <div class="grid-content proImg">
              <img :src="item.proimg" class="img-res">
            </div>
            <p>{{item.title}}</p>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      newsContent: {},
      reProList: [
        {title: 'Mobile Impact Crusher', id: 22, proimg: '//www.kefid.com/v3/uploads/130517/1-13051G13U1U0.jpg'},
        {title: 'Deep Rotor VSI Crusher', id: 15, proimg: '//www.kefid.com/v3/new-style/images/crusher_11.jpg'},
        {title: 'MTW-Series European Tech. Grinding Mill', id: 34, proimg: '//www.kefid.com/v3/new-style/images/mill_03.jpg'},
        {title: 'Vibrating Feeder', id: 28, proimg: '//www.kefid.com/v3/new-style/images/wash_05.jpg'}
      ]
    }
  },
  async mounted () {
    await axios.get('/exnews/' + this.$route.params.newsId).then(response => {
      this.newsContent = response.data.data
      document.title = this.newsContent.title
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    palceImg (body) {
      body = body.replace(/\/v3\/uploads\//g, '//www.kefid.com/v3/uploads/')
      body = body.replace(/<img/g, '<img class="img-ewsRes"')
      return body
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped lang="sass">
.container
  padding: 52px 0 66px 0
.newsContent
  padding: 0 1rem
  p
    font-size: 1.4rem
  .goBack
    overflow: hidden
    button
      border: 0
      padding: 0
      margin-top: 1rem
      float: right
.repro
  a
    color: #444
    p
      font-size: 1.4rem
</style>
